<template>
  <div class="file-content file-content-video" :class="{ preHeight: preHeight }">
    <div class="videoMessage" v-loading="preHeight">
      <div class="cover-box">
        <el-image
          v-if="videoCover && isSupportPlay"
          class="videoMessage-cover"
          fit="contain"
          :src="videoCover"
          @load="load"
        />
      </div>

      <div class="play-icon-box" @click="play">
        <img class="play-icon" v-if="isSupportPlay" :src="video_play" alt="" />
        <img class="play-icon" v-else :src="video_noplay" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
/** vue */
import ChatMixin from '@src/modules/im/ChatMixin/index.js';
/** util */
import { getExtension } from '@src/modules/im/imChat/utils/tools.js';
/** assets */
import { getOssUrl } from '@src/util/assets'
const video_play = getOssUrl('/im/video_play.png');
const video_noplay = getOssUrl('/im/video_noplay.png');

export default {
  name: 'video-message',
  mixins: [ChatMixin],
  props: {
    msgInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      video_play,
      video_noplay,
      preHeight: true,
    };
  },
  computed: {
    fileExtension() {
      return getExtension(this.compatibleFieldByExt(this.msgInfo, 'filename'));
    },
    fileUrl() {
      return this.compatibleFieldByExt(this.msgInfo, 'url');
    },
    videoCover() {
      return `${this.fileUrl}?x-oss-process=video/snapshot,t_7000,f_jpg`;
    },
    isSupportPlay() {
      const video = document.createElement('video');
      try {
        let res = video.canPlayType(`video/${this.fileExtension}`);
        return !!res;
      } catch (err) {
        return false;
      }
    },
  },
  methods: {
    play() {
      if (this.isSupportPlay) {
        this.$previewVideo(this.compatibleFieldByExt(this.msgInfo, 'url'));
      } else {
        this.$message.error(this.$t('common.base.tip.yourBrowerIsNotAllowThisVideo'));
      }
    },
    load() {
      this.preHeight = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.file-content-video {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.videoMessage {
  min-width: 100px;
  min-height: 70px;
  height: auto;
  background-color: #000000;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  .cover-box {
    width: 100%;
    height: 100%;
    position: relative;

    .videoMessage-cover {
      min-width: 80px;
      max-width: 140px;
      width: auto;
      height: auto;
      max-height: 200px;
      overflow: hidden;
      display: block;
    }
  }
  .play-icon-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .play-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 99;
      width: 36px;
      height: 36px;
    }

    .no-play {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      color: #ffffff;
      display: flex;
      align-items: center;
    }
  }
}
.preHeight {
  height: 200px !important;
}
</style>